<template>
  <div>
    <h1 @click="changeMessage('nextTick')">nextTick</h1>
    <h2 id="h2">{{ message }}</h2>
  </div>
</template>
<script>
import { defineComponent, nextTick, ref } from 'vue'
export default defineComponent({
  setup() {
    const message = ref('Hello!')
    // eslint-disable-next-line
    const changeMessage = (newMessage) => {
      // 1. 数据驱动dom更新
      message.value = newMessage
      console.log('------>1:', document.getElementById('h2').innerHTML)
      // 2. 等待dom更新结束
      nextTick(() => {
        console.log('Now DOM is updated')
        console.log('------2>:', document.getElementById('h2').innerHTML)
      })
    }
    return {
      message,
      changeMessage
    }
  }
})
</script>
